<template>
  <div class="disflex h100p flex-column">
    <div class="disflex bgfff jsbet pl15 pr15 align-cen h49 fs16 c38">
      <p class="fbold">短视频名称</p>
      <input type="text" class="textr" :disabled="hiddenBtn" :placeholder="detallData.title || '请输入视频标题'"  :value="videoTitle" @input="titleInput" >
    </div>
    <div class="disflex bgfff jsbet pl15 pr15 align-cen h49 fs16 c38">
    <!-- <div class="disflex bgfff jsbet pl15 pr15 align-cen h49 fs16 c38" @click="addAddress"> -->
      <p class="fbold">添加位置</p>
      <input type="text" class="textr" :disabled="hiddenBtn" :placeholder="detallData.address || '请输入位置'"  :value="address" @input="video_address" >
      <span class="cblue" @click="resetAddr">重新定位</span>
      <!-- <p>{{address}}</p> -->
    </div>
    <div class="disflex bgfff jsbet mb align-cen h70 pl21 pr25 mt10" v-if='!hiddenData'>
      <div class="disflex jscen align-cen flex-column">
        <div class="disflex jscen align-cen bblue bradius3 box">
          <img :src="eyeIcon" class="w10 h10 mr3">
          <p class="fs10 cblue">已查看</p>
        </div>
        <p class="fs14 lh1 fbold mt10">{{detallData.playVolume || 0}}</p>
      </div>
      <div class="disflex jscen align-cen flex-column">
        <div class="disflex jscen align-cen borange bradius3 box">
          <img :src="clientIcon" class="w10 h10 mr3">
          <p class="fs10 corange">获客人数</p>
        </div>
        <p class="fs14 lh1 fbold mt10">{{detallData.guestsNum || 0}}</p>
      </div>
      <div class="disflex jscen align-cen flex-column">
        <div class="disflex jscen align-cen byellow bradius3 box">
          <img :src="likeIcon" class="w10 h10 mr3">
          <p class="fs10 cyellow">点赞</p>
        </div>
        <p class="fs14 lh1 fbold mt10">{{detallData.likesNum || 0}}</p>
      </div>
      <div class="disflex jscen align-cen flex-column">
        <div class="disflex jscen align-cen bgreen bradius3 box">
          <img :src="forwardIcon" class="w10 h10 mr3">
          <p class="fs10 cgreen">转发</p>
        </div>
        <p class="fs14 lh1 fbold mt10">{{detallData.forwardNum || 0}}</p>
      </div>
    </div>
    <div class="flex1 overauto pb15">
      <div class="bgfff mt10 mb10 pt17 pb17 pl15">
        <p class="fs16 c38 fbold mb10">视频封面</p>
        <p class="fs14 ca8 mb15">建议上传16:9，750x422px以上的jpg图片</p>
        <div
          v-if="detallData.coverImg"
          class="w100 h100"
          @click="uploadpic(1)">
          <img :src="detallData.coverImg" mode="aspectFill" class="w100 h100 bradius10 mr7 mb7" alt="">
        </div>
        <div
          v-else
          class="bgfff bdash_a8 w100 h100 add_img mr7 mb7" @click="uploadpic(1)">
        </div>
      </div>
      <div class="bgfff pt17 pb17 pl15">
        <p class="fs16 c38 fbold mb10">视频内容</p>
        <p class="fs14 ca8 mb15">只能上传MP4文件，视频时间不超过60秒，且不超过10M</p>
        <div
          v-if="detallData.url"
          class="w100 h100"
          @click="upvideo">
          <video :src="detallData.url" class="w100 h100 bradius10 mr7 mb7"></video>
        </div>
        <div
          v-else
          class="bgfff bdash_a8 w100 h100 add_img mr7 mb7" @click="upvideo">
        </div>
      </div>
    </div>
    <div class="video_btn bgfff"  v-if='!hiddenBtn'>
      <div class="w50p fs18 ca8 disflex flex-column align-cen jscen" @cancel="cancel">
       取消
      </div>
      <div class="w50p disflex jscen align-cen bg_line_blue fs18 cfff" @click="addShortVideo">
        发布
      </div>
    </div>
  </div>
</template>

<script>
import WXAJAX from "@/utils/request";
import util from '@/utils/index';
import amapFile from "@/libs/amap-wx.js";
export default {
  data() {
    return {
      clientIcon:WXAJAX.imgBackUrl +'yimai_photos/crmAdd/ic_client2.png',
      eyeIcon:WXAJAX.imgBackUrl +'yimai_photos/crmAdd/ic_eye2.png',
      forwardIcon:WXAJAX.imgBackUrl +'yimai_photos/crmAdd/ic_forward2.png',
      likeIcon:WXAJAX.imgBackUrl +'yimai_photos/crmAdd/ic_like2.png',
      vidoeCover:'',
      video:'',
      address:'',
      videoTitle:'',
      type:'',
      hiddenBtn:false,
      hiddenData:false,
      videoId:'',
      detallData:{
        coverImg:'',
        url:'',
        videoId:''
      }
    };
  },
  onShow(){
    let add = wx.getStorageSync('video_address') || ''
    if(add){
      this.address = add
    }
  },
  mounted(){
    this.type = this.$root.$mp.query.type
    this.videoId = this.$root.$mp.query.videoId
    if(this.type == 'add'){
      this.hiddenData = true
      wx.setNavigationBarTitle({
        title: '新增视频'
      });

      this.Mc = wx.createMapContext("map");
      this.myAmapFun = new amapFile.AMapWX({
        key: "e11026819b6d300fda6a2c680fbd2fef"
      });
      this.getlocation();

    }else if(this.type == 'edit'){
      this.hiddenData = true
      wx.setNavigationBarTitle({
        title: '编辑视频'
      });
      this.gitVideoDetall()
    }else if(this.type == 'check'){
      this.hiddenBtn = true
      wx.setNavigationBarTitle({
        title: '查看详情'
      });
      this.gitVideoDetall()
    }
  },
  methods: {
    async uploadpic ( count) {
      if(this.hiddenBtn){
        return
      }
      let path = await util.chooseImage('file', count);
      if (Object.prototype.toString.call(path) !== '[object Array]') return;
      this.uploadImgFun(path, 0)
    },
    // 递归上传
    async uploadImgFun (arr, index = 0) {
      await this.uploadImg(arr[index])
      if (index < arr.length - 1) {
        this.uploadImgFun(arr, index + 1)
      }
    },
    uploadImg (path) {
      let v = this;
      wx.showLoading({ mask: true });
      return WXAJAX.UploadImage(path).then((data) => {
        wx.hideLoading();
        data = JSON.parse(data);
        if (data.code == '200') {
          console.log(data)
          v.detallData.coverImg = WXAJAX.imgBackUrl + data.data
        } else {
          wx.showToast({
            title: '网络异常',
            duration: 2000,
            icon: 'none'
          })
        }
      }).catch((err) => {
        wx.hideLoading();
        console.log('err -- ', err);
      })

    },
    upvideo(){
      if(this.hiddenBtn){
        return
      }
      let v = this
      util.chooseVideo().then(res => {
        uni.showLoading({
          title: '上传中',
          mask: true
        });
        WXAJAX.UploadImage(res.tempFilePath)
        .then(data => {
          wx.hideLoading();
          data = JSON.parse(data);

          if(data.code == 200 ){
            v.detallData.url = 'https://myy-one-stand.oss-cn-beijing.aliyuncs.com/' + data.data
          } else {
            wx.showToast({
              title: '文件大小超出限制，最大10M',
              icon: 'none',
              duration: 2000
            })
          }
        })
        .catch((err) => {
          wx.hideLoading();
          wx.showToast({
              title: '服务器繁忙',
              duration: 2000,
              icon: 'none'
          })
        })
      }).catch(err => {
        wx.showToast({
          title: err,
          duration: 2000,
          icon: 'none'
        })
      })
    },
    addAddress(){
      if(this.hiddenBtn){
        return
      }
      wx.navigateTo({
        url:`../../companyAddr/main?videoAdd=${true}`
      })
    },
    resetAddr(){
      var than = this;

      this.Mc = wx.createMapContext("map");
      this.myAmapFun = new amapFile.AMapWX({
        key: "e11026819b6d300fda6a2c680fbd2fef"
      });
      this.getlocation();

    },
    titleInput(e){
        this.videoTitle = e.target.value
    },
    video_address(e){
        this.address = e.target.value
    },

    addShortVideo(){
      let v = this
      let url = ''
      if(this.type == 'edit'){
        url = '/shortVideo/update'
      }else{
        url = '/shortVideo/add'
      }
      wx.showLoading()
      if(v.address == '' ||  v.videoTitle == '' || v.detallData.url  == '' || v.detallData.coverImg == ''){
        wx.showToast({
          title:'视频信息不完整,请完善',
          icon:'none'
        })
        return
      }
      let data = {
        address: v.address,
        companyId: wx.getStorageSync('COMPANYID'),
        title: v.videoTitle,
        url: v.detallData.url ,
        userId: wx.getStorageSync('userId'),
        coverImg: v.detallData.coverImg,
        state:1,
        videoId: v.detallData.videoId,
      }
      WXAJAX.POST(data,'',url)
      .then((data, code) => {
            wx.hideLoading();
            wx.showToast({
              title:'成功',
              duration: 2000,
              icon: "none"
            });
            wx.navigateBack({})
          })
        .catch(err => {
          wx.hideLoading();
          wx.showToast({
            title: err.message,
            duration: 2000,
            icon: "none"
          });
        });
      },
    gitVideoDetall(){
      WXAJAX.POST({
        companyId: wx.getStorageSync('COMPANYID'),
        videoId: this.videoId
      },'','/shortVideo/queryById')
      .then((data, code) => {
          wx.hideLoading();
          this.detallData = data
          this.address = this.detallData.address
          this.videoTitle = this.detallData.title
        })
      .catch(err => {
        wx.hideLoading();
        wx.showToast({
          title: err.message,
          duration: 2000,
          icon: "none"
        });
      });
    },
    getlocation() {
      //获取经纬度
      let author = ''
      wx.showLoading({
        title: "定位中...",
        mask: true
      });
      var v = this;
      wx.getLocation({
        type: "wgs84",
        success: function(res) {
          let latitude = res.latitude;
          let longitude = res.longitude;
          wx.chooseLocation({
              latitude,
              longitude,
              success: function (res) {
                console.log("address",res.address)
                  v.address = res.address
              }
          })
          wx.hideLoading();
        },
        fail: function(err) {
          if(author == false){
            v.isShowAuthorize = true;
            return false
          }
          wx.hideLoading({
            success() {
              wx.showToast({
                title: "定位失败",
                icon: "none",
                duration: 2000
              });
            }
          });
        },
        complete: function() {
          wx.hideLoading();
        }
      });
    },
    cancel(){
      wx.navigateBack({})
    }
  },
  destroyed(){
    wx.removeStorageSync('video_address')
  }
};
</script>

<style scoped>
.video_btn{
  display: flex;
  height: 98upx;
  width: 100%;
}
.box{
  padding:5upx 9upx 6upx 9upx;
}
</style>
